<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown Content</title>
    <!-- 引入 Element UI 的 JS 和 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
    <!-- 引入 marked 库 -->
    <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 100vh;
            background-color: #f0f0f0;
        }

        #app {
            margin-top: 50px; /* 调整头部空出的距离 */
            width: 80%; /* 调整内容区域宽度 */
            max-width: 1000px; /* 设置最大宽度 */
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #content {
            max-width: 100%; /* 限制内容区域宽度 */
            overflow: hidden; /* 隐藏溢出部分 */
        }

        #content img {
            max-width: 100%; /* 图片最大宽度 */
            height: auto; /* 保持宽高比 */
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-card>
                <div id="content"></div>
            </el-card>
        </el-main>
        <p th:text="${fileName}" style="display: none;"></p>
    </el-container>
</div>

<script>
    window.onload = function() {
        let fileName = document.querySelector('p[style="display: none;"]').innerText;
        console.log(fileName);

        fetch('/getMarkdownContent/' + fileName, {
            headers: {
                'Content-Type': 'text/plain;charset=UTF-8'
            }
        })
            .then(response => response.text())
            .then(data => {
                if (typeof marked === 'function') {
                    document.getElementById('content').innerHTML = marked(data);
                } else {
                    console.error('marked 方法未加载');
                }
            })
            .catch(error => console.error('Error:', error));
    };
</script>
</body>
</html>
